<!DOCTYPE html>
<html>
  <head>
    <script src="../resources/testharness.js"></script>
    <script src="../resources/testharnessreport.js"></script>
  </head>
  <body>
    <img id="oval0" src="resources/oval.png" style="zoom: 1%">
    <img id="oval1" src="resources/oval.png" style="zoom: 2%">
    <img id="oval2" src="resources/oval.png" style="zoom: 3%">
    <img id="oval3" src="resources/oval.png" style="zoom: 4%">
    <img id="oval4" src="resources/oval.png" style="zoom: 5%">
    <img id="oval5" src="resources/oval.png" style="zoom: 30%">
    <img id="oval6" src="resources/oval.png" style="zoom: 33%">
    <img id="oval7" src="resources/oval.png" style="zoom: 50%">
    <img id="oval8" src="resources/oval.png" style="zoom: 70%">
    <img id="oval9" src="resources/oval.png" style="zoom: 100%">
    <img id="oval10" src="resources/oval.png" style="zoom: 111%">
    <img id="oval11" src="resources/oval.png" style="zoom: 150%">
    <img id="oval12" src="resources/oval.png" style="zoom: 333%">
    <img id="oval13" src="resources/oval.png" style="zoom: 400%">
    <img id="oval14" src="resources/oval.png" style="zoom: 1234%">
<script>
const EXPECTED_WIDTH = 37;
const EXPECTED_HEIGHT = 33;
for (i = 0; i < 15; ++i) {
  const oval = document.getElementById('oval' + i);
  const testDesc = `Zoom ${oval.style.zoom} should not affect width/height of images.`;
  const testBody = () => {
    assert_equals(oval.width, EXPECTED_WIDTH, oval.getAttribute('style'));
    assert_equals(oval.height, EXPECTED_HEIGHT, oval.getAttribute('style'));
  };
  if (oval.complete) {
    test(testBody, testDesc);
  } else {
    async_test(t => {
      oval.onload = t.step_func_done(testBody);
    }, testDesc);
  }
}
</script>
  </body>
</html>
